<template>
  <div id="page-activity-sign-up">
    <h2>{{ activity.act_name }} - 报名名单</h2>

    <card>
      <Input v-model="query.keyword" placeholder="请输入姓名/俱乐部" style="width: 200px"></Input>
      <Select v-model="query.pkActGroup" style="width: 150px" placeholder="请选择组别">
        <Option :value="''" :key="''" selected>全部组别</Option>
        <Option
          v-for="item in actGroupList"
          :key="item.pk_act_group"
          :value="item.pk_act_group">{{ item.group_name }}</Option>
      </Select>
      <Select v-model="query.revokeSignUp" style="width: 120px" placeholder="请选择报名状态">
        <Option :value="-1" :key="-1" selected>报名状态</Option>
        <Option :value="'0'">正常</Option>
        <Option :value="'1'">已取消</Option>
      </Select>
      <Select v-model="query.payStatus" style="width: 120px" placeholder="请选择支付状态">
        <Option :value="-1" :key="-1" selected>支付状态</Option>
        <Option :value="'0'">已支付</Option>
        <Option :value="'1'">未支付</Option>
      </Select>
      <Button type="primary" class="mr10" @click="search()">查询</Button>
    </card>
    <card class="mt10">
      <div class="m10 clearfix">
        <Button type="info" class="mr10">选择报名人员</Button>
        <download-btn :download="`${apiUrl}/gxActivitySignUp/exportSignUpExcel`" :query="this.export">
          <Button type="info" class="mr10">导出名单</Button>
        </download-btn>
      </div>

      <Table
        :columns="columns"
        :data="list"
        :loading="loading"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </card>
    <order-modal :form="form" @submit="getList"></order-modal>
    <signup-modal :form="signupForm" @submit="getList"></signup-modal>
    <update-modal :form="updateForm" @submit="getList"></update-modal>
  </div>
</template>

<script>
  import { apiUrl } from '@/config'
  import activityApi from '@/api/activity'
  import downloadBtn from '@/components/download-btn'
  import orderModal from './components/signup/order-modal'
  import signupModal from './components/signup/signup-modal'
  import updateModal from './components/signup/update-modal'
  import moment from 'moment'

  export default {
    name: 'page-activity-sign-up',
    props: [
      'activity'
    ],
    components: {
      downloadBtn,
      orderModal,
      signupModal,
      updateModal
    },
    data () {
      let activityId = this.$route.params.activityId
      return {
        apiUrl,
        loading: false,
        export: {
          pkActBaseInfo: activityId
        },
        query: {
          pkActBaseInfo: activityId,
          pkActGroup: '',
          revokeSignUp: -1,
          payStatus: -1,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        form: {
          visible: false,
          data: {},
          template: {}
        },
        signupForm: {
          visible: false,
          data: {},
          template: {}
        },
        updateForm: {
          visible: false,
          data: {},
          template: {}
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '姓名',
            width: 65,
            key: 'realName'
          },
          {
            title: '性别',
            width: 50,
            key: 'sexName'
          },
          {
            title: '手机号',
            width: 100,
            key: 'mobile'
          },
          {
            title: '报名组别',
            width: 100,
            key: 'groupName'
          },
          {
            title: '报名费',
            width: 50,
            key: 'signUpFee'
          },
          {
            title: '报名状态',
            width: 50,
            key: 'revokeSignUpName'
          },
          {
            title: '支付状态',
            width: 70,
            key: 'payStatus',
            render: (h, params) => {
              let { row } = params
              return row.payStatus === 0 ? '已支付' : '未支付'
            }
          },
          {
            title: '俱乐部',
            width: 100,
            key: 'signRclubName'
          },
          {
            title: '组队名称',
            width: 90,
            key: 'teamName'
          },
          {
            title: '是否队长',
            width: 50,
            key: 'captainName',
            render: (h, params) => {
              let { row } = params
              return row.captainName === '0' ? '是' : '否'
            }
          },
          {
            title: '报名时间',
            width: 100,
            key: 'roads',
            render: (h, params) => {
              let { row } = params
              return row.signUpTime && moment(row.signUpTime).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          {
            title: '报名来源',
            width: 70,
            key: 'signUpSourceName'
          },
          {
            title: '操作',
            width: 150,
            align: 'center',
            render: (h, params) => {
              let { row } = params
              if (row.payStatus === 0) {
                if (row.revokeSignUp === 0) {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'success',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.showSignUpModal(params.row)
                        }
                      }
                    }, '取消报名'),
                    h('Button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.showUpdateModal(params.row)
                        }
                      }
                    }, '编辑')
                  ])
                } else {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'info',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.showSignUpModal(params.row)
                        }
                      }
                    }, '恢复报名'),
                    h('Button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.showUpdateModal(params.row)
                        }
                      }
                    }, '编辑')
                  ])
                }
              } else if (row.payStatus === 1) {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showOrderModal(params.row)
                      }
                    }
                  }, '取消订单'),
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showUpdateModal(params.row)
                      }
                    }
                  }, '编辑')
                ])
              }
            }
          }
        ],
        list: []
      }
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      search () {
        this.query.currentPage = 1
        this.getList()
      },
      async getList () {
        this.loading = true
        const { body } = await activityApi.signup.list(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      async getActGroupList () {
        this.loading = true
        const { body } = await activityApi.group.listNoPage({
          pk_act_base_info: this.$route.params.activityId
        })
        const { responseData } = body
        this.loading = false
        this.actGroupList = responseData
      },
      showOrderModal (row) {
        this.form.data.pkActSign = row.pkActSign
        this.form.data.pkTotality = row.pkTotality
        this.form.data.pkActBaseInfo = row.pkActBaseInfo
        this.form.visible = true
      },
      showSignUpModal (row) {
        this.signupForm.data.revokeSignUp = row.revokeSignUp
        this.signupForm.data.pkTotality = row.pkTotality
        this.signupForm.data.pkActSign = row.pkActSign
        this.signupForm.visible = true
      },
      showUpdateModal (row) {
        this.updateForm.data.pkActSign = row.pkActSign
        this.updateForm.data.signPkRclubInfo = row.signPkRclubInfo
        this.updateForm.visible = true
      }
    },
    mounted () {
      this.getList()
      this.getActGroupList()
    }
  }
</script>
